<template>
  <div class="elCardPlus">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>抄表员管理</span>
            <!-- 禁用按钮 -->
            <!-- 删除 -->
            <el-button type="text" icon="el-icon-delete" circle size="mini" style="float: right; padding: 3px 0;margin-left:10px;"></el-button>
            <!-- 编辑 -->
            <el-button type="text" icon="el-icon-edit" circle size="mini" style="float: right; padding: 3px 0"></el-button>
            <!-- 添加 -->
            <el-button type="text" icon="el-icon-circle-plus-outline" circle size="mini" style="float: right; padding: 3px 0"></el-button>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
        </div>
      </el-card>

  </div>
</template>

<script>
export default {
    name:'elCardPlus'

}
</script>

<style scoped lang='scss'>
.elCardPlus{  
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  /deep/.box-card {
    width: 480px;
    border:1px solid #7f8e9f;
    .el-card__header{   
        padding: 0; 
        height: 37px;
        padding: 8px 10px 2px 10px;
        background-color: #7f8e9f;
        color: #fff !important;
        border-bottom: 1px solid #eee;
        .el-button--mini{
            color: white;
        }
    }
  }
}

</style>